<script setup lang='ts'>
import { useGetNoteByPage } from '@fl/api/mall-api'
import dayjs from 'dayjs'
import { ElSkeleton } from 'element-plus'

import others from '/public/assets/others.svg'
import tendering from '/public/assets/tendering.svg'
import winningbid from '/public/assets/winningbid.svg'

const categoryEnum = {
    others: 3,
    tendering: 1,
    winningbid: 2,
}

const tenderingParams = ref({ category: categoryEnum.tendering, page: 1, size: 3 })
const winningbidParams = ref({ category: categoryEnum.winningbid, page: 1, size: 3 })
const othersParams = ref({ category: categoryEnum.others, page: 1, size: 3 })

const { data: tenderingData, isLoading: tenderingLoading } = useGetNoteByPage(tenderingParams)
const { data: winningbidData, isLoading: winningbidLoading } = useGetNoteByPage(winningbidParams)
const { data: othersData, isLoading: othersLoading } = useGetNoteByPage(othersParams)

const loading = computed(() => tenderingLoading.value || winningbidLoading.value || othersLoading.value)

function formatDate(val: any) {
    return val ? dayjs(val).format('MM/DD') : ''
}

function formatYear(val: any) {
    return val ? dayjs(val).format('YYYY') : ''
}

function openMallWindow(val: any) {
    window.open(`${import.meta.env.VITE_API_MALL_PATH}/tender?category=${val}`, '_blank')
}

function showDetail(id: string) {
    window.open(`${import.meta.env.VITE_API_MALL_PATH}/tender/${id}`, '_blank')
}
</script>

<template>
    <div class="py-40 my-20 w-full">
        <div class="mx-auto w-1300">
            <ElSkeleton v-if="loading"
                        :rows="5"
            />

            <template v-else>
                <div class="mb-40 text-30 font-700 flex">
                    <div>招采平台</div>
                </div>

                <div class="flex gap-20 justify-between">
                    <el-card class="w-full"
                             shadow="never"
                    >
                        <template #header>
                            <div class="card-header flex justify-between">
                                <div class="text-18 font-bold flex gap-10 items-center">
                                    <img :src="tendering">
                                    招标公告
                                </div>

                                <div class="text-#aaa font-12 cursor-pointer"
                                     @click="openMallWindow(categoryEnum.tendering)"
                                >
                                    查看更多 >
                                </div>
                            </div>
                        </template>

                        <template v-if="tenderingData?.records">
                            <el-row v-for="item in tenderingData?.records"
                                    :key="item.id"
                                    :gutter="20"
                                    class="pb-10 mb-20 border-b border-#ccc border-solid cursor-pointer items-center"
                                    @click="showDetail(item.id)"
                            >
                                <el-col :span="4">
                                    <div class="text-16 text-#4E5969 font-500">
                                        {{ formatDate(item?.releaseTime) }}
                                    </div>

                                    <div class="text-12 text-#767676">
                                        {{ formatYear(item?.releaseTime) }}
                                    </div>
                                </el-col>

                                <el-col :span="14">
                                    <div class="truncate"
                                         :title="item?.noticeName"
                                    >
                                        {{ item?.noticeName }}
                                    </div>
                                </el-col>

                                <el-col :span="6">
                                    <el-tag color="#F2F3FF"
                                            class="text-#0052D9!"
                                    >
                                        招标信息
                                    </el-tag>
                                </el-col>
                            </el-row>
                        </template>

                        <div v-else
                             class="text-center"
                        >
                            暂无数据
                        </div>
                    </el-card>

                    <el-card class="w-full"
                             shadow="never"
                    >
                        <template #header>
                            <div class="card-header flex justify-between">
                                <div class="text-18 font-bold flex gap-10 items-center">
                                    <img :src="winningbid">
                                    中标公告
                                </div>

                                <div class="text-#aaa font-12 cursor-pointer"
                                     @click="openMallWindow(categoryEnum.winningbid)"
                                >
                                    查看更多 >
                                </div>
                            </div>
                        </template>

                        <template v-if="winningbidData?.records">
                            <el-row v-for="item in winningbidData?.records"
                                    :key="item.id"
                                    :gutter="20"
                                    class="pb-10 mb-20 border-b border-#ccc border-solid cursor-pointer items-center"
                                    @click="showDetail(item.id)"
                            >
                                <el-col :span="4">
                                    <div class="text-16 text-#4E5969 font-500">
                                        {{ formatDate(item?.releaseTime) }}
                                    </div>

                                    <div class="text-12 text-#767676">
                                        {{ formatYear(item?.releaseTime) }}
                                    </div>
                                </el-col>

                                <el-col :span="14">
                                    <div class="truncate"
                                         :title="item?.noticeName"
                                    >
                                        {{ item?.noticeName }}
                                    </div>
                                </el-col>

                                <el-col :span="6">
                                    <el-tag color="#FFF1E9"
                                            class="text-#E37318!"
                                    >
                                        中标公告
                                    </el-tag>
                                </el-col>
                            </el-row>
                        </template>

                        <div v-else
                             class="text-center"
                        >
                            暂无数据
                        </div>
                    </el-card>

                    <el-card class="w-full"
                             shadow="never"
                    >
                        <template #header>
                            <div class="card-header flex justify-between">
                                <div class="text-18 font-bold flex gap-10 items-center">
                                    <img :src="others">
                                    其他公告
                                </div>

                                <div class="text-#aaa font-12 cursor-pointer"
                                     @click="openMallWindow(categoryEnum.others)"
                                >
                                    查看更多 >
                                </div>
                            </div>
                        </template>

                        <template v-if="othersData?.records">
                            <el-row v-for="item in othersData?.records"
                                    :key="item.id"
                                    :gutter="20"
                                    class="pb-10 mb-20 border-b border-#ccc border-solid cursor-pointer items-center"
                                    @click="showDetail(item.id)"
                            >
                                <el-col :span="4">
                                    <div class="text-16 text-#4E5969 font-500">
                                        {{ formatDate(item?.releaseTime) }}
                                    </div>

                                    <div class="text-12 text-#767676">
                                        {{ formatYear(item?.releaseTime) }}
                                    </div>
                                </el-col>

                                <el-col :span="20">
                                    <div class="truncate"
                                         :title="item?.noticeName"
                                    >
                                        {{ item?.noticeName }}
                                    </div>
                                </el-col>
                            </el-row>
                        </template>

                        <div v-else
                             class="text-center"
                        >
                            暂无数据
                        </div>
                    </el-card>
                </div>
            </template>
        </div>
    </div>
</template>

<style scoped>
:deep(.el-tag) {
    border: none;
}
</style>
